Sass обозначает Синтаксически Потрясающие Таблицы стилей. Sass является в основном просто расширением к CSS, которое помогает нам написать более гибкие стили.

Sass дает нам возможность сделать большие и сложные таблицы стилей более легкими в понимании и легче их поддержать. Благодаря особенностям таким как переменные, mixins, вложение, наследование, код более организован, позволяя нам работать более быстрее.

Знайте, что, когда мы пишем в Sass, браузеры не собираются понимать наш код, потому что это не CSS, который мы пишем, таким образом, мы должны использовать компилятор, чтобы компилировать наш код Sass в CSS.

Мы не собираемся охватывать целый процесс установки и компиляции Sass в этом разделе. Если Вы хотите экспериментировать и следовать за мной через это учебное руководство, я предлагаю использовать онлайн редактор, такой как Codepad или любой другой, который Вы предпочтете, не устанавливая его на Вашей машине.

Прежде чем мы продвинемся, я хочу удостовериться, что Вы не запутаетесь в двух синтаксисах Sass. Это просто два различных способа написать код, оба производят тот же самый результат на выходе. Я лично люблю и использую .scss, и я буду использовать .scss синтаксис в этой статье.

Переменные это сильные инструменты, потому что они позволяют Вам изменять код быстро. Определяя переменную мы храним в нем определенную ценность, приемлемые ценности для переменных включают числа, последовательности, цвета, пустой указатель, списки и карты.

Чтобы декларировать переменную в Sass, Вы ставите $ сопровождая названием переменной, в этом случае blue, двоеточие и затем ценность этой переменной.

Давайте посмотрим переменные в действии:

Которое компилируется как:

Это — просто основной подход для использования переменных.
Вы можете сделать намного более продвинутый материал с переменными.

Sass позволяет нам использовать правила CSS, которые будут вложены в друг друга. Вложение - потрясающий способ организовать и структурировать Ваш CSS, и охраняет Вас от ненужного повторения. Поэтому давайте посмотрим пример того, насколько сильна эта особенность:

Моя рекомендация состоит в том, чтобы не вкладывать больше чем четыре уровня, код может стать грязным и вызвать проблемы, поэтому сохраняйте его простым и более чистым.

Наследование — одна из самых полезных особенностей в sass, и использование Распространение позволяют нам отделить свойства CSS от одного до другого. Это помогает сохранять нашу sass ОЧЕНЬ СУХОЙ.

Распространение должно быть использовано, когда нам нужны столь же оформленные элементы, которые все еще отличаются по некоторой детали. Например, давайте сделаем две кнопки – основная и вторичная.

Которое компилируется в это:

Вы видите, насколько сильна эта особенность? Sass объединила селекторы вместо того, чтобы повторить те же самые декларации много раз, сохранив нам драгоценную память.

Смешивания — другая потрясающая особенность Sass.

В основном смешивание позволяет нам делать группы объявлений CSS, которые мы хотим снова использовать для нашего веб-сайта. Мы можем передать ценности как аргументы, это позволяет нашему смешиванию быть более гибким.

Sass использует @mixin директиву, чтобы определить смешивания и @include директиву, чтобы использовать их. Давайте построим простое основное смешивание для border-radius, который мы можем использовать для кнопок.

Которое компилируется в это:

Это — эффективный способ использовать mixins, если своиство требует, чтобы префиксы работали во всех браузерах.

Это — основное введение в sass. sass - чрезвычайно мощный инструмент, который помогает нам сделать некоторые действительно невероятные вещи.